<template>
  <a-tabs v-model:activeKey="activeKey" type="editable-card" :tabBarGutter="4" @edit="onEdit" @change="clickToRouter">
    <a-tab-pane v-for="tab in tabArr" :key="tab.key" :tab="tab.title">
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
import { reactive } from 'vue';
import { useRouterStore } from "../store/StoreMenu";
import { storeToRefs } from "pinia";

const routerStore = useRouterStore();
const { tabArr, activeKey } = storeToRefs(routerStore);

// 点击标签处理的逻辑
function clickToRouter(key) {
  routerStore.changeActiveRoute(key);
}

const onEdit = (targetKey, action) => {
  if (action === 'add') {
    // 添加标签的逻辑
  } else {
    remove(targetKey);
  }
};

async function remove(key) {
  console.log(key);
  const index = tabArr.value.findIndex(item => item.key === key);
  tabArr.value.splice(index,1)

  if(index ==0){
    return
  }
  var keyPath = tabArr.value[index-1].key
  console.log(keyPath);
  // console.log(keyPath);
  console.log(index);
 
  routerStore.changeActiveRoute(keyPath);
}
</script>